import React, {useMemo} from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import {useTranslation} from 'react-i18next';
import moment from 'moment';

const LineCharts = ({
                        statisticalCenterData = {
                            exposures: [],
                            fans: [],
                            hits: []
                        }
                    }) => {
    const {t} = useTranslation();

    // 生成最近30天列表
    const recentDaysList = useMemo(() => {
        const currentDate = moment();

        return [...Array(30)].map((_, i) => currentDate.clone().subtract(i, 'days').format('YYYY-MM-DD'))
    }, []);

    // 配置数据 当天没有数据的值设为0
    const formatData = useMemo(() => {
        let newData = {
            fans: [],
            exposures: [],
            hits: []
        };

        recentDaysList.forEach(recent => {
            // 被关注数
            const fansFindData = statisticalCenterData?.fans?.find(f => f.date === recent);
            newData.fans = [
                ...newData.fans,
                fansFindData ? fansFindData.count || 0 : 0
            ];

            // 曝光次数
            const exposuresFindData = statisticalCenterData?.exposures?.find(f => f.date === recent);
            newData.exposures = [
                ...newData.exposures,
                exposuresFindData ? exposuresFindData.count || 0 : 0
            ];

            // 点击次数
            const hitsFindData = statisticalCenterData?.hits?.find(f => f.date === recent);
            newData.hits = [
                ...newData.hits,
                hitsFindData ? hitsFindData.count || 0 : 0
            ];
        });

        return newData

    }, [statisticalCenterData])

    const options = {
        chart: {
            style: {
                fontSize: '1em'
            },
        },
        title: {
            text: t('Active data within 30 days'),
            align: 'left'
        },

        // subtitle: {
        //     text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
        //     align: 'left'
        // },

        yAxis: {
            title: {
                text: ''
            }
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        // plotOptions: {
        //     series: {
        //         label: {
        //             connectorAllowed: false
        //         },
        //         pointStart: 2010
        //     }
        // },

        xAxis: {
            categories: recentDaysList.map(item => moment(item).format('MM-DD'))
        },

        series: [{
            name: t('New followers'),
            data: formatData.fans
        }, {
            name: t('Number of searches'),
            data: []
        }, {
            name: t('Number of exposures'),
            data: formatData.exposures
        }, {
            name: t('Number of clicks'),
            data: formatData.hits
        }],

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        },
        credits: {
            // 是否显示版权链接
            enabled: false
        }
    };


    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
    );
};

export default LineCharts;